<template>
	<view class="wh bf c0">
		<!-- 		<view class="f32 wei6">登录门店管理后台</view>
		<view class="c8 f13 mt5 mb10">未注册手机号验证后自动创建账号</view> -->
		<view class="bf p20">
			<view class="mt20"></view>
			<view :class="current==0?'isCode':'isPwd'">
				<u-tabs :list="list1" :current="current" :lineColor="subColor" lineWidth="60"
					:activeStyle="{color: '#000',fontWeight: 'bold',fontSize:'26px'}"
					:inactiveStyle="{color: '#000',fontSize:'18px'}" @click="click">
				</u-tabs>
			</view>
			<view class="mt20"></view>
			<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
				<!-- <u-form-item label=" " prop="number" ref="item1" labelWidth="0px">
					<u--input placeholder="请输入店铺编号" border="none" v-model="form.number" placeholderClass="init"
						:customStyle="{padding:' 15px 10px ',background:'#f6f6f6',borderRadius:'16rpx'}"></u--input>
				</u-form-item> -->
				<u-form-item label=" " v-if="current==1" prop="username" ref="item1" labelWidth="0px">
					<u--input placeholder="请输入账号" border="none" v-model="form.username" placeholderClass="init"
						:customStyle="{padding:' 15px 10px ',background:'#f6f6f6',borderRadius:'16rpx'}"></u--input>
				</u-form-item>
				<u-form-item v-if="current==1" label=" " prop="password" ref="item1" labelWidth="0px">
					<u-input placeholder="请输入密码" border="none" :password="!ispwd" v-model="form.password"
						placeholderClass="init"
						:customStyle="{padding:' 15px 10px ',background:'#f6f6f6',borderRadius:'16rpx'}">
						<!-- #ifndef APP-VUE -->
						<template slot="suffix">
							<view class="pr5" @click="changePwd">
								<u-icon :name="ispwd?'eye-off':'eye-fill'" color="#999" size="24"></u-icon>
							</view>
						</template>
						<!-- #endif -->
					</u-input>
				</u-form-item>
				<uni-forms-item v-if="current==1">
					<view style="margin-top: 20rpx;display: flex;justify-content: space-between;align-items: center;">
						<u-checkbox-group v-model="passwordVal" placement="column" size="14" labelSize="13px"
							labelColor="#b6b6b6" :activeColor="subColor" icon-color="#000" @change="checkboxChange">
							<u-checkbox label="记住密码" :name="1">
							</u-checkbox>
						</u-checkbox-group>
						<view style="color: #ff5722;" @click="liftWXBind">解除微信绑定</view>
					</view>
				</uni-forms-item>
				<u-form-item v-if="current==1" label=" " prop="verifyCode" ref="item1" labelWidth="0px">
					<!-- <u-input v-model="form.verifyCode" placeholder="请输入验证码" border="none" placeholderClass="init"
						:customStyle="{padding:'7px',background:'#f6f6f6',borderRadius:'16rpx'}">
						<template slot="suffix">
							<view class="code">
								<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"
									:keepRunning="true">
								</u-code>
								<u-button @click="getCode" :text="tips" type="text"
									:customStyle="{ color:'#FD8906',fontSize:'12px'}"></u-button>
							</view>
						</template>
					</u-input> -->
				</u-form-item>
				<!-- <u-form-item class="code" label=" " prop="deal" ref="item1" labelWidth="0px" v-if="merchantMini && merchantMini.agreementState!=0">
					<view class="dfa">
						<view class="f12 c6">
							<u-checkbox-group v-model="value" placement="column" size="14" labelSize="13px"
								labelColor="#b6b6b6" :activeColor="subColor" icon-color="#000">
								<u-checkbox label="我已阅读并同意" :name="1">
								</u-checkbox>
							</u-checkbox-group>
						</view>
						<text class="f13" :style="{color:'#FD8906'}" @click="goDl">《用户隐私协议》</text>
					</view>
				</u-form-item> -->
				<view class="log mt50" v-if="current==0">
					<u-button class="log" text="微信一键登录" :color="subColor" size="large" shape="circle"
						:customStyle="{fontSize:'14px',fontWeight:'bold',color:'#000',marginTop: '20px'}"
						@tap="wxLogin"></u-button>
				</view>
			</u--form>
			<view class="log mt50" v-if="current==1">
				<u-button class="log" :text="loginText" :color="subColor" size="large" shape="circle"
					:customStyle="{fontSize:'14px',fontWeight:'bold',color:'#000'}" @click="submit(0)"></u-button>
			</view>
		</view>
		<domeUrl ref="domeRef" @auth="auth" />
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	import domeUrl from './components/domeUrl.vue';
	import site from '@/custom/siteroot.js';
	import {
		userInfo
	} from 'os';
	export default {
		components: {
			domeUrl,
		},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				password: '',
				refreshing: false,
				current: 0,
				ispwd: false,
				value: [],
				form: {
					number: '',
					username: uni.getStorageSync('username'),
					verifyCode: '',
					password: uni.getStorageSync('password'),
					captchaInfo: '',
					keep: '',
					captchaId: ''
				},
				tips: '获取验证码',
				text: '',
				merchantMini: {},
				list1: [{
						name: '微信登录'
					},
					{
						name: '密码登录'
					},
				],
				rules: {
					// number: [{
					// 	required: true,
					// 	message: '请输入店铺编号',
					// 	trigger: ['blur', 'change']
					// }],
					username: [{
							required: true,
							message: '请输入账号',
							trigger: ['change', 'blur'],
						},
						// {
						// 	validator: (rule, value, callback) => {
						// 		return uni.$u.test.mobile(value);
						// 	},
						// 	message: '手机号码格式不正确',
						// 	trigger: ['change', 'blur'],
						// }
					],
					// verifyCode: [{
					// 	required: true,
					// 	message: '请输入验证码',
					// 	trigger: ['blur', 'change']
					// }],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}]
				},
				hexList: [],
				passwordVal: uni.getStorageSync('is_keep'),
				loginText: '登录',
				wxBind: 0,
				openid: ''
			}
		},
		onLoad() {
			for (let i = 0; i <= 15; i++) {
				this.hexList[i] = i.toString(16)
			}
			uni.setStorageSync('subject_color', '#FDDA34') //主题色
			this.subColor = '#FDDA34'
			// #ifndef APP-PLUS
			// this.getConfig()
			// this.getArea()
			// #endif
			// #ifdef APP-PLUS
			if (this.siteroot) {
				// this.getConfig()
				// this.getArea()
			}
			// #endif
		},
		computed: {
			...mapState({
				siteroot: state => state.siteroot,
			}),
		},
		onReady() {
			// #ifdef APP-PLUS 
			// if (!this.siteroot) {
			// 	this.$refs['domeRef'].open()
			// }
			// #endif
			// #ifdef MP-WEIXIN || H5
			this.setSiteroot(site.siteroot)
			// #endif
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			...mapActions(["getLogin", "getMenu"]),
			...mapMutations(["setSiteroot"]),
			checkboxChange(e) {
				uni.setStorageSync('is_keep', e)
			},
			changePwd() {
				this.ispwd = !this.ispwd
			},
			click(e) {
				this.current = e.index
			},
			auth(e) {
				if (e) this.setSiteroot(e.domain)
				this.getConfig()
				this.getArea()
			},
			wxLogin() {
				uni.login({
					success: (res) => {
						uni.showLoading()
						uni.request({
								url: site.siteroot +
									'/index.php/api/store_uni_app.Index/get_wechat_openid',
								method: "POST",
								data: {
									code: res.code
								},
							})
							.then(res => {
								this.openid = res.data.data.openid
								if (res.data.code == 1 || res.code == 1) {
									uni.setStorageSync('adminInfo', res.data
										.data.userInfo);
									uni.setStorageSync('token', res.data
										.data.userInfo.token);
									uni.hideLoading()
									this.getMenu()
									setTimeout(res => {
										uni.reLaunch({
											url: '/pages/index/index'
										})
									}, 800)
								} else {
									uni.hideLoading()
									uni.showModal({
										title: '提示',
										content: '检测到您未绑定账号',
										confirmText: '去绑定',
										success: (res) => {
											if (res.confirm) {
												this.wxBind = 1
												this.loginText = '绑定并登录'
												this.current = 1
											} else {
												this.wxBind = 0
											}
										}
									})
								}
							})
					}
				})
			},
			liftWXBind() {
				uni.showModal({
					title: '提示',
					content: '请确保需解绑的账号密码都已输入',
					confirmText: '去解除',
					success: (res) => {
						if (res.confirm) {
							uni.request({
									url: site.siteroot +
										'/index.php/api/store_uni_app.Index/un_wechat_bind',
									method: 'post',
									data: {
										username: this.form.username,
										password: this.form.password
									}
								})
								.then(res => {
									uni.$u.toast(res.data.msg)
								})
						}
					}
				})
			},
			async submit() {
				// #ifdef APP-PLUS
				// if (!this.siteroot) {
				// 	return this.$refs['domeRef'].open()
				// }
				// #endif
				if (this.merchantMini && this.merchantMini.agreementState == 1 && !this.value.length) {
					uni.$u.toast('请勾选用户隐私协议')
					return
				}
				this.form.wxBind = this.wxBind
				this.form.openid = this.openid
				this.form.type = this.current
				this.form.mobile = this.form.username
				this.form.captchaInfo = '';
				this.form.keep = false;
				this.form.captchaId = this.uuid();
				this.$refs.uForm.validate().then(res => {
					this.getLogin(this.form)
				}).catch(errors => {
					uni.$u.toast('请填写完整的登录信息')
				})
			},
			revisePassword() {
				setTimeout(function() {
					uni.navigateTo({
						url: '/pages/login/revisepw/revisepw'
					})
				}, 150);
			},
			uuid() {
				let uuid = ''
				for (let i = 1; i <= 36; i++) {
					if (i === 9 || i === 14 || i === 19 || i === 24) {
						uuid += '-'
					} else if (i === 15) {
						uuid += 4
					} else if (i === 20) {
						uuid += this.hexList[(Math.random() * 4) | 8]
					} else {
						uuid += this.hexList[(Math.random() * 16) | 0]
					}
				}
				return uuid
			},
			codeChange(text) {
				this.tips = text;
			},
			async getConfig() {
				let {
					data: {
						merchantMini
					}
				} = await this.beg.request({
					url: this.api.systemConfig,
					method: 'get'
				})
				if (merchantMini) this.merchantMini = merchantMini
				if (this.merchantMini && this.merchantMini.smsLogin != 0) {
					// this.list1.push({
					// 	name: '短信登录'
					// })
				}
				// if (merchantMini && merchantMini.btnColor) {
				// 	this.merchantMini = merchantMini
				// 	uni.setStorageSync('subject_color', merchantMini.btnColor) //主题色
				// 	this.subColor = this.merchantMini.btnColor
				// } else {
				// 	uni.setStorageSync('subject_color', '#FDDA34') //主题色
				// 	this.subColor = '#FDDA34'
				// }
			},
			async getArea() {
				let areaList = uni.getStorageSync('areaList')
				if (!areaList) {
					const {
						data,
					} = await this.beg.request({
						url: this.api.commonRegion,
					})
					uni.setStorageSync('areaList', data)
				}
			},
			async getCode() {
				if (this.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					let {
						data
					} = await this.beg.request({
						url: this.api.smsLogin,
						method: 'POST',
						data: {
							mobile: this.form.username
						}
					})
					if (data) {
						uni.hideLoading();
						uni.$u.toast('验证码已发送');
						this.$refs.uCode.start();
					}
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			goDl() {
				uni.setStorageSync('fwb', this.merchantMini && this.merchantMini.agreement)
				uni.navigateTo({
					url: `/pages/mine/fwb?t=${'用户隐私协议'}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.init {
		color: #c1c1c1 !important;
	}

	/deep/.u-input__content__field-wrapper__field {
		padding-left: 20rpx !important;
	}

	// /deep/.u-form-item .u-form-item__body__right__message {
	// 	color: #49c265;
	// }

	/deep/.u-tabs__wrapper__nav__item {
		padding-bottom: 30rpx !important;
	}

	/deep/.u-tabs__wrapper__nav__line {
		bottom: 0px !important;
	}

	/deep/.isCode {
		.u-tabs__wrapper__nav__line {
			transform: translate(32px) !important;
		}
	}

	/deep/.isPwd {
		.u-tabs__wrapper__nav__line {
			transform: translate(128px) !important;
		}
	}

	/deep/.u-radio-group {
		width: 100px !important;
	}

	/deep/.u-input__content__field-wrapper__field {
		font-size: 28rpx !important;
	}

	/deep/.code {
		.u-button__text {
			font-size: 28rpx !important;
		}
	}

	/deep/.u-checkbox {
		&>text {
			color: #999 !important;
			font-size: 26rpx !important;
			line-height: 1 !important;
		}
	}

	/deep/.log {
		.u-button__text {
			font-size: 30rpx !important;
		}
	}
</style>